// 建立连接
var socket = io.connect('http://localhost:7000');

// 获取DOM元素
var oUser = document.getElementById('username'),
  oMessage = document.getElementById('message'),
  oContent = document.getElementById('outputArea'),
  oFeedBackArea = document.getElementById('feedbackArea'),
  oSendBtn = document.getElementById('sendButton');

oSendBtn.addEventListener('click', function () {
  socket.emit('chat', {
    message: oMessage.value,
    userName: oUser.value
  }) // 提交
})

message.addEventListener('compositionstart', function () {
  // 适合中文拼音 compositionstart 事件
  socket.emit('typing', oUser.value)
}, false);

// 监听事件
socket.on('chat', function (data) {
  oContent.innerHTML = '';
  oFeedBackArea.innerHTML = '';
  addTel(oContent, data)
})

function addTel(elem, data) {
  elem.innerHTML += `<p><strong>${data.userName}:</strong>${data.message}</p>`
}

// 广播信息

socket.on('typing', function (data) {
  oFeedBackArea.innerHTML = `<p><em>${data}正在输入中</em></p>`;
})
